<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 动画的处理方式:
        // 1.自定义动画,然后通过类名添加
        // 2.使用第三方解决方案
        // 3.利用js封装:  定时器  或者 延迟函数+递归函数
        // js封装动画案例
        btn.onclick = function () {
            fn()
        }

        function fn() {
            if (starH >= endH) {
                return
            }
            starH += jia
            box.style.height = starH + 'px'
            setTimeout(fn, 5)
        }







        // 正则表达式
        // 验证
        两种验证与表达式的对比状态
        test() : 返回布尔值, true 代表符合  false 不符合
        exec() : 返回数组, 代表符合, 返回 null 不符合




        // 用于         表单验证  + 敏感词替换
        // 格式         let 正则对象 = //

        // 字符串中包含连续的abc即可
        let reg = /abc/;
        // 字符串必须只能是abc
        let reg = /^abc$/
        // 字符串为字母a 到 f中的一个即可
        let reg = /^[a-f]$/;

        // *  >= 0
        // +  >= 1
        // ?  0或者 1

        { n } 等于n次
        { n,} >= n 次
        { n, m } n 到 m 次
        let reg = /^[a-c]{5, 8}$/

        // g 检查所有
        // i 不分大小写
        let reg = /^a$/gi
        let str = 'abbbcccaddda'




        // 预定义类
        \d: 代表[0 - 9]
        \w: 代表[a - zA - Z0 -9_]

        \D: 非[0 - 9]之间的值
        \W: 非[a - zA - Z0 -9_] 之间值

        \s: \t\r\n
        \S: 非 特殊符号



        // 智能表单
        type = "number" 强制数字
        type = 'email'  强制邮箱
        type = 'tel'
        type = 'url'



        // 表单事件  
        input事件: 当用户输入内容的时候执行
        focus事件: 当输入框获取焦点的时候执行
        blur事件: 当输入框失去焦点的时候执行




        // 敏感词替换
        // replace(正则表达式(被替换的内容),替换用的字符)
        let reg = /敏感词/gi
        btn.onclick = function () {
            let texts = text.value
            div.innerHTML = texts.replace(reg, '***')
        }




        // 键盘事件
        // keydown : 按下执行  
        html.onkeydown = function () {
            console.log(1111);
        }
        // keyup   : 抬起执行
        html.onkeyup = function () {
            console.log(2222);
        }
        // keypress : 按下执行 (shift 方向键  alt  ctrl ...)
        html.onkeypress = function () {
            console.log(3333);
        }





        // 如何获取键盘按键
        // 通过 事件对象参数 获取按键信息
        // 获取键内容
        事件对象参数.key
        // 获取键名称
        事件对象参数.code
        // 获取键号
        事件对象参数.keyCode

    </script>
</body>

</html>